<template>
	<div class="common-layout">
		<el-container>
			<el-aside width="200px">
				<el-menu router active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
					default-active="2" text-color="#fff">
<!-- 二级路由 el-menu-item 表示没有子集-->
					<el-menu-item :index="item.auth_path" v-for="item in acl" v-show="item.children.length == 0">
						<el-icon><icon-menu /></el-icon>
						<span>{{item.auth_name}}</span>
					</el-menu-item>

<!-- 表示有子集 -->
					<el-sub-menu :index="item.auth_path" v-for="item in acl" v-show="item.children.length != 0">
						<template #title>
							<el-icon>
								<location />
							</el-icon>
							<span>{{item.auth_name}}</span>
						</template>
						<!-- 没有子集 -->
						<el-menu-item :index="item.auth_path" v-show="child.is_nav == 1" v-for="child in item.children">
						<el-icon><icon-menu /></el-icon>
						<span>{{ child.auth_name }}</span>
					</el-menu-item>

						
					</el-sub-menu>
					
					
				</el-menu>

			</el-aside>
			<el-container>
				<el-header></el-header>
				<el-main>
					<!-- 二级路由坑 -->
					<router-view>

					</router-view>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
//获取登录存的菜单项
const acl = JSON.parse(localStorage.getItem('acl')) 
console.log('acl',acl);
</script>

<style scoped lang = "scss">
.common-layout{
	background-color: #d3ccd6;
}
.common-layout,
.el-aside,
.el-container ,
.el-menu{
	height: 100%;
	
}

.el-header {
	background-color:#b1d5c8 ;
}
</style>